<template>
	<view :style="{'background-color':col}" style="z-index: 9999999;">
		<view :style="{'height':tops+'px', 'background-color': col}"
			style="position: fixed;z-index: inherit;width: 100%;"></view>
		<view :style="{'height':tops+'px'}"></view>
		<view class="top" :style="{'width':widths+'px','top':tops+'px', 'background-color': col}"
			style="position: fixed;z-index: inherit;">
			<!-- 左侧返回 -->
			<view class="lefticon" v-if="left_icon" @click="left_sub">
				<image src="/static/tabbar/back.png" v-if="left_icon_url == ''" mode=""></image>
				<image :src="left_icon_url" v-else mode=""></image>
			</view>
			<view class="lefticon" v-else>
				<!-- <image src="../../../static/tabbar/back.png" v-if="left_icon_url == ''" mode=""></image>
				<image :src="left_icon_url" v-else mode=""></image> -->
			</view>
			<!-- 中间标题 -->
			<view class="title" :style="{'color':titlcolor}">
				{{title}}
			</view>
			<!-- 右侧 -->
			<view class="righticon_text righticon" v-if="right_text != ''">
				{{right_text}}
			</view>
			<view class="righticon" v-else-if="right_icon != ''">
				<image :src="right_icon" mode=""></image>
			</view>
			<view class="righticon" v-else>

			</view>


		</view>
		<view class="" style="height: 90rpx;background-color: #fff;">

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tops: 0,
				widths: 0

			}
		},
		props: {
			// 标题
			title: {
				default: '',
				type: String
			},
			// 标题颜色
			titlcolor: {
				default: '#000',
				type: String
			},
			// 标题栏颜色
			col: {
				default: '#fff',
				type: String
			},
			// 左侧图标是否展示
			left_icon: {
				default: true,
				type: Boolean
			},
			// 左侧图标地址，默认返回图标
			left_icon_url: {
				default: '',
				type: String
			},
			// 左侧图标跳转地址，默认返回上一页
			left_go: {
				default: '',
				type: String
			},
			// 左侧图标跳转地址，是否是tabBar页
			go: {
				default: false,
				type: Boolean
			},
			// 右侧图标，和文字二选一
			right_icon: {
				default: '',
				type: String
			},
			// 右侧文字
			right_text: {
				default: '',
				type: String
			},
		},
		created() {
			let _self = this
			uni.getSystemInfo({
				success: (e) => {
					console.log(e)
					this.tops = e.statusBarHeight
					this.widths = e.safeArea.width
				}
			})
		},
		methods: {
			left_sub(){
				if(this.left_go == ''){
					uni.navigateBack({delta: 1})
				}else if(this.go){
					// 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。
					uni.switchTab({
						url: this.left_go,
					});
				}else{
					// 关闭当前页面，跳转到应用内的某个页面。
					uni.redirectTo({
						url: this.left_go,
					});
				}
			}
		}
	}
</script>

<style>
	.lefticon {
		width: 33.3%;
		text-align: left;
	}

	.lefticon image {
		width: 20rpx;
		height: 36rpx;
		margin-left: 20rpx;
	}

	.title {
		width: 33.3%;
		text-align: center;
	}

	.righticon {
		width: 33.3%;
	}

	.righticon image {
		width: 40rpx;
		height: 40rpx;
	}

	.top {
		width: 100%;
		display: flex;
		align-items: center;

		height: 90rpx;

		box-shadow: 0 4px 2px 0px rgba(71, 71, 71, 0.4);
	}
</style>